<script setup>

</script>

<template>
  <!--评价-->
  <div class="mt-[10px] bg-[#fff] rounded-[10px] p-[20px]">
    <!--标题-->
    <div class="flex justify-between">
      <div class="font-bold text-[16px]">本店同款商品评价(629)</div>
      <div>
        <van-icon name="arrow"/>
      </div>
    </div>
    <!--内容-->
    <div class="grid-content mt-[10px]">
      <div class="flex text-[12px] text-[#545454]">
        <div class="tag-item">回头客 249</div>
        <div class="tag-item">物美价廉 110</div>
        <div class="tag-item">推荐 60</div>
        <div class="tag-item">会回购 36</div>
      </div>
      <div class="mt-[10px]" v-for="item in 5">
        <div class="flex items-center">
          <van-image
              round
              width="1.5rem"
              height="1.5rem"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <div class="text-[12px] text-[#a3a3a3] ml-[8px]">我是方老师</div>
        </div>
        <div class="mt-[10px] text-[#333333]">自从吃了这个药,腰也不酸了,腿也不疼了,好滴很!</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tag-item {
  background: #f4dcdc;
  padding: 2px 5px;
  margin-right: 10px;
  border-radius: 5px;
}
</style>
